<template>
    <div class="container">
        <!-- 页头 -->
        <Header v-bind:isBack="isBack" :title="title"></Header>

        <!-- 演出列表 -->
        <div class="showList">
            <div class="show" v-for="item in showList" :key="item.id">
                <img src="" alt="">
                <div class="information">
                    <p class="title">{{ item.name }}</p>
                    <div class="tips">
                        <p>{{ item.time }}</p>
                        <p>{{ item.address }}</p>
                    </div>
                    <p class="price"><span>¥{{ item.price }}<span> 起</span></span><span class="purchase">去购票</span></p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'look-show',
    data() {
        return {
            isBack: true,
            title: "想看演出",
            showList: [
                {
                    name: '2019周洁琼 霍尊《醉赤壁＋日不落醉赤壁》',
                    time: '2019.04.23-2019.04.28',
                    address: '上海丨虹口足球场',
                    price: '60'
                },
                {
                    name: '2019周洁琼 霍尊《醉赤壁＋日不落醉赤壁》',
                    time: '2019.04.23-2019.04.28',
                    address: '上海丨虹口足球场',
                    price: '60'
                },
                {
                    name: '2019周洁琼 霍尊《醉赤壁＋日不落醉赤壁》',
                    time: '2019.04.23-2019.04.28',
                    address: '上海丨虹口足球场',
                    price: '60'
                },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
    .container {
        padding: 1rem 0 0 0;

        .showList {
            margin-top: 0.24rem;
            
            .show {
                padding: 0.32rem 0.24rem 0.24rem;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                border-bottom: 0.015rem solid #E9E9E9;

                img {
                    width: 2.76rem;
                    height: 3.12rem;
                    border-radius: 0.1rem;
                    background-color: pink;
                }

                .information {
                    width: 4.26rem;
                    height: 3.12rem;
                    padding-left: 0.2rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    .title {
                        font-size:0.32rem;
                    }

                    .tips {
                        font-size:0.26rem;
                        color:rgba(153,153,153,1);

                        p:first-child {
                            margin-bottom: 0.24rem;
                        }
                    }

                    .price {
                        font-size:0.36rem;
                        display: flex;
                        justify-content: space-between;

                        span:first-child {
                            color:rgba(244,67,73,1);

                            span {
                                font-size:0.24rem;
                                color:rgba(153,153,153,1);
                            }
                        }

                        .purchase {
                            width:1.4rem;
                            height:0.52rem;
                            line-height:0.5rem;
                            font-size:0.32rem;
                            color:rgba(255,255,255,1);
                            background:rgba(244,67,73,1);
                            text-align: center;
                            border-radius:0.26rem;
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }
</style>